<template>
  <div class="pages">
    <!-- chart -->
    <el-row style="height:400px;">
      <el-col style="height:100%;">
        <LineChart :xData="xData" :yData="yData" :y2Data="y2Data" title="网络流量实时监控"></LineChart>
      </el-col>
    </el-row>

    <el-row :gutter="12">
      <el-col :span="12">
        <el-card class="box-card">
          <div class="title">CPU</div>
          <div class="header">
            <div class="item-content" style="font-weight: 500;">属性</div>
            <div class="item-content" style="font-weight: 500;">值</div>
          </div>
          <div class="text item">
            <div class="item-content">核心数</div>
            <div class="item-content">{{cpu.cpuNum}}</div>
          </div>
          <div class="text item">
            <div class="item-content">用户使用率</div>
            <div class="item-content">{{cpu.used}}%</div>
          </div>
          <div class="text item">
            <div class="item-content">系统使用率</div>
            <div class="item-content">{{cpu.sys}}%</div>
          </div>
          <div class="text item">
            <div class="item-content">当前空闲率</div>
            <div class="item-content">{{cpu.free}}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div class="title">内存</div>
          <div class="header">
            <div class="item-content" style="font-weight: 500;">属性</div>
            <div class="item-content" style="font-weight: 500;">内存</div>
            <div class="item-content" style="font-weight: 500;">JVM</div>
          </div>
          <div class="text item">
            <div class="item-content">总内存</div>
            <div class="item-content">{{mem.total}}G</div>
            <div class="item-content">{{jvm.total}}M</div>
          </div>
          <div class="text item">
            <div class="item-content">已用内存</div>
            <div class="item-content">{{mem.used}}G</div>
            <div class="item-content">{{jvm.used}}M</div>
          </div>
          <div class="text item">
            <div class="item-content">剩余内存</div>
            <div class="item-content">{{mem.free}}G</div>
            <div class="item-content">{{jvm.free}}M</div>
          </div>
          <div class="text item">
            <div class="item-content">使用率</div>
            <div class="item-content">{{mem.usage}}%</div>
            <div class="item-content">{{jvm.usage}}%</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="title">服务器信息</div>
          <div class="text item">
            <div class="item-content">服务器名称</div>
            <div class="item-content">{{sys.computerName}}</div>
            <div class="item-content">操作系统</div>
            <div class="item-content">{{sys.osName}}</div>
          </div>
          <div class="text item">
            <div class="item-content">服务器IP</div>
            <div class="item-content">{{sys.computerIp}}</div>
            <div class="item-content">系统架构</div>
            <div class="item-content">{{sys.osArch}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="box-card card-box">
          <div class="title">Java虚拟机信息</div>
          <div class="text item">
            <div class="item-content">Java名称</div>
            <div class="item-content">{{jvm.name}}</div>
            <div class="item-content">Java版本</div>
            <div class="item-content">{{jvm.version}}</div>
          </div>
          <div class="text item">
            <div class="item-content">启动时间</div>
            <div class="item-content">{{jvm.startTime}}</div>
            <div class="item-content">运行时长</div>
            <div class="item-content">{{jvm.runTime}}</div>
          </div>
          <div class="text item">
            <div class="item-content">安装路径</div>
            <div class="item-content">{{jvm.home}}</div>
            <div class="item-content"></div>
            <div class="item-content"></div>
          </div>
          <div class="text item">
            <div class="item-content">项目路径</div>
            <div class="item-content">{{sys.userDir}}</div>
            <div class="item-content"></div>
            <div class="item-content"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="title">磁盘状态</div>
          <div class="header">
            <div class="item-content" style="font-weight: 500;">盘符路径</div>
            <div class="item-content" style="font-weight: 500;">文件系统</div>
            <div class="item-content" style="font-weight: 500;">盘符类型</div>
            <div class="item-content" style="font-weight: 500;">总大小</div>
            <div class="item-content" style="font-weight: 500;">可用大小</div>
            <div class="item-content" style="font-weight: 500;">已用大小</div>
            <div class="item-content" style="font-weight: 500;">已用百分比</div>
          </div>
          <div v-for="sysFile in sysFiles" class="text item">
            <div class="item-content">{{sysFile.dirName}}</div>
            <div class="item-content">{{sysFile.sysTypeName}}</div>
            <div class="item-content">{{sysFile.typeName}}</div>
            <div class="item-content">{{sysFile.total}}</div>
            <div class="item-content">{{sysFile.free}}</div>
            <div class="item-content">{{sysFile.used}}</div>
            <div class="item-content">{{sysFile.usage}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from "@/components/chart/LineChart";
import Vue from 'vue';
export default {
  data() {
    return {
      xData: [],
      yData: [],
      y2Data: [],
      cpu: {},
      jvm: {},
      mem: {},
      sys: {},
      sysFiles: {}
    };
  },
  components: {
    LineChart,
    Vue
  },
  created() {
    this.getServerInfo();
  },
  mounted() {
    this.initWebSocket();
    this.getDataList();
    // setInterval(this.getDataList, 5000);
  },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() {
      //初始化weosocket
      const wsuri =
        window.SITE_CONFIG["baseUrl"]
          .replace(RegExp("https", "g"), "wss")
          .replace(RegExp("http", "g"), "ws") + "/ws/net/net";

      this.websock = new WebSocket(wsuri,[Vue.cookie.get('token')]);
      this.websock.onmessage = this.websocketonmessage;
    },
    websocketonmessage(e) {
      //数据接收
      if (e.data != "连接成功") {
        this.xData.push(JSON.parse(e.data).currentTime);
        this.yData.push(JSON.parse(e.data).currentTxBytes);
        this.y2Data.push(JSON.parse(e.data).currentTxPackets);
        this.xData.splice(0, 1);
        this.yData.splice(0, 1);
        this.y2Data.splice(0, 1);
      }
    },

    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/monitor/net/list"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.xData = [];
          this.yData = [];
          this.y2Data = [];
          for (let i in data.list) {
            this.xData.push(
              JSON.parse(data.list[data.list.length - i - 1]).currentTime
            );
            this.yData.push(
              JSON.parse(data.list[data.list.length - i - 1]).currentTxBytes
            );
            this.y2Data.push(
              JSON.parse(data.list[data.list.length - i - 1]).currentTxPackets
            );
          }
        }
      });
    },
    getServerInfo() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/monitor/server/info"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.cpu = data.server.cpu;
          this.jvm = data.server.jvm;
          this.mem = data.server.mem;
          this.sys = data.server.sys;
          this.sysFiles = data.server.sysFiles;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.pages {
  .title {
    border-bottom: 1px solid #eee !important;
    padding-bottom: 10px;
    color: #303133;
    font-size: 16px;
  }
  /deep/.item,
  .header {
    border-bottom: 1px solid #eee !important;
    padding: 10px 0;
    display: flex;
    .item-content {
      flex: 1;
      text-align: left;
      color: #606266;
      padding-left: 10px;
    }
  }

  .header {
    color: #909399;
  }
  .box-card {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-bottom: 10px !important;
  }
}
</style>
